<template>
    <w-pop ref="pop" :direction="'btt'" :showHeader="false">
        <div class="time_list">
            <div class="time_item" v-for="t in times" @click="handleClickTime(t)">{{ t }}</div>
        </div>

    </w-pop>
</template>

<script>
import { defineComponent, ref, reactive, nextTick, onMounted, toRaw, toRefs, watch } from 'vue'
export default defineComponent({

    setup(props, { emit }) {
        const pop = ref()
        const open = () => {
            pop.value.open();
        };
        const handleClose = () => {
            pop.value.close()
        }

        const times = ref([
            '09:00-10:00',
            '10:00-11:00',
            '11:00-12:00',
            '13:00-14:00',
            '14:00-15:00',
            '15:00-16:00',
            '16:00-17:00',
            '17:00-18:00',
            '18:00-19:00',
            '19:00-20:00',
            '20:00-21:00',
        ])

        const handleClickTime = (time) => {
            emit('handleClickTime', time)
            handleClose()
        }
        return {
            times,
            pop,
            open,
            handleClose,
            handleClickTime
        }
    }
})
</script>
<style scoped lang='scss'>
.time_list {
    // min-height: 300px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    color: #666;
    font-family: Helvetica;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    // line-height: 16px;

    /* 114.286% */
    .time_item {
        width: 33.333333333%;
        text-align: center;
        height: 30px;
        line-height: 30px;
        margin: 8px 0;
    }

    .time_item:active {
        color: var(--el-color-primary);
    }

    .time_item:focus {
        color: var(--el-color-primary);
    }
}
</style>